<template>
  <!-- 自定义图标 -->
  <van-popup
    class="my-code-popup"
    v-model="showMyCodePop"
    closeable
    position="bottom"
    round
  >
  <div class="my-code-popup-contanier">
    <div class="title">我的抽奖码({{total}})</div>
    <div class="my-code-box">
      <van-list v-model="loading"
                :finished="finished"
                :error.sync="error"
                error-text="请求失败，点击重新加载"
                finished-text=""
                @load="onLoad">
        <div class="code-item"
              v-for="(list,index) in lists"
              :key="index">
          <div class="code-title">
            <span>券码{{index+1}}</span>
            <span>{{list.create_time}}</span>
          </div>
          <div class="code-content">
            <div class="code-img">
              <img :src="list.head_img" alt="">
            </div>
            <div class="code-right">
              <div class="code-source" v-if="list.is_give==0">首次参与活动获得</div>
              <div class="code-source" v-else>分享好友获得</div>
              <div class="code-num">{{list.serial_number}}</div>
            </div>
          </div>
          <div></div>
        </div>
      </van-list>
    </div>
    <p v-if="!finished" class="load-text" @click="onLoad">点击加载更多</p>
    <p v-else class="load-text">没有更多了</p>
    <div class="my-code-btn">
      <van-button  class="btn" color="linear-gradient(to right, #FA5F63, #E04045)" round type="info" @click="closeMyCode">确定</van-button>
    </div>
  </div>
  </van-popup>
</template>

<script>
import Vue from 'vue'
import { Popup } from 'vant'

Vue.use(Popup)
import { getMyLuckDrawCode } from '@/api/activity/activityApi'

export default Vue.extend({ 
  data() {
    return {
      showMyCodePop: false,
      total: '',
      lists: [],
      p: 1,
      loading: false,
      finished: false,
      error: false
    }
  },
  created() {
    this.init();
    this.onLoad()
  },
  methods: {
    init() {
      this.p = 1
      this.loading = false
      this.finished = false
      this.error = false
      this.lists = []
    },
    onLoad() {
      this.loading = true
      const query = this.$route.query
      const params = {
        activity_id: query.activity_id,
        p: this.p
      }
      getMyLuckDrawCode(params).then(res => {
        this.loading = false
        if (res.data.list.length > 0) {
          this.total = res.data.total
          this.lists = this.lists.concat(...res.data.list)
          this.p++
        } else {
          this.finished = true
        }
      })
        .catch(() => {
          this.error = true
        })
    },
    closeMyCode() {
      this.showMyCodePop = false
    }
  }
})
</script>
<style lang="scss">
.my-code-popup{
  background: #FEF2DD;
  height: 814px;
  overflow: hidden;
  .my-code-popup-contanier{
    height: 100%;
    .title{
      text-align: center;
      font-size: 32px;
      font-weight: 500;
      color: #C84348;
      line-height: 70px;
      width: 430px;
      height: 76px;
      margin: 0 auto;
      background: url(https://img.wifenxiao.com/h5-wfx/images/activity/my_code_title.png) center/cover no-repeat;
    }
    .my-code-box{
       width: 686px;
       margin: 48px auto 0;
       height: 520px;
       overflow-y:scroll ;
      .code-item{
        background: url(https://img.wifenxiao.com/h5-wfx/images/activity/my_code_bg.png) center/cover no-repeat;
        margin-bottom: 24px;
        &:last-child{
          margin-bottom: 0;
        }
        .code-title{
          display: flex;
          font-size: 24px;
          color: #A6ACA4;
          line-height: 34px;
          padding: 14px 32px;
          justify-content: space-between;
        }
        .code-content{
          padding: 20px 32px;
          display: flex;
          .code-img{
            width: 104px;
            height: 104px;
            border-radius: 50%;
            overflow: hidden;
            img{
              width: 100%;
              height: 100%;
            }
          }
        }
        .code-right{
          padding-left: 40px;
          width: calc(100% - 104px);
          .code-source{
            font-size: 28px;
            font-weight: 500;
            color: #7C7A7A;
            line-height: 40px;
          }
          .code-num{
            font-size: 32px;
            font-weight: bold;
            color: #333333;
            line-height: 54px;
            margin-top: 8px;
          }
        }
      }
    }
    .load-text{
      text-align: center;
      color: #666;
      font-size: 24px;
      line-height: 50px;
    }
    .my-code-btn{
      padding: 20px 32px;
      background: #FEFAF3;
      .btn{
        height: 80px;
        font-size: 32px;
        width: 100%;
        border: 2px solid #FED078!important;
      }
      p{
        text-align: center;
        font-size: 28px;
        font-weight: 500;
        color: #EA5D62;
        line-height: 40px;
        padding: 24px 0;
      }
    }
  }
  .van-popup__close-icon{
    color: #A86F3F;
    font-size: 32px;
    font-weight: bold;
  }
}
</style>